<template>
  <div class="go-back" @click="goBack">
    <el-image :src="image" fit="fill" />
    <span>{{ title }}</span>
  </div>
</template>
<script>
  import image from '@/assets/images/go-back.png'

  export default {
    name: "GoBack",
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        image
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped lang="scss">
  .go-back {
    width: fit-content;
    cursor: pointer;
    transform: translateY(-10px);
    display: flex;
    align-items: center;
    .el-image {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    &:hover {
      filter: invert(3%);
      font-weight: 600;
    }
  }
</style>
